<template>
    <div class="box">
        <div class="banner-box">
            <div class="crumbs-box">
                <div class="crumbs">信息登记 / 密接人员详情</div>
            </div>
            <!-- tag -->
            <div class="tag-box">
                <div class="tag" @click="DetailInformation">基本信息</div>
                <div class="tag" @click="DetailTrack">流行病学轨迹调查</div>
                <div class="tag" @click="DetailAssociated">关联次密接人员信息</div>
                <div class="tag" @click="DetailTrajectory">跟踪转运</div>
                <div class="tag" @click="DetailHomeMedicine">居家医学观察/监测</div>
                <div class="tag" @click="DetailDataLog">数据日志</div>
            </div>
        </div>
        <router-view></router-view>
    </div>
</template>
  
<script lang="ts">
import { defineComponent, onBeforeMount, ref } from "vue";
import { useRoute, useRouter } from "vue-router";



export default defineComponent({
    name: "DetailTag ",
    setup() {
        const router = useRouter()
        const route = useRoute()


        // 路由跳转基本信息
        const DetailInformation = () => {
            router.push({ path: '/DetailInformation', query: {id:`${route.query.id}`} })
        }
        //路由跳转流行病学轨迹调查
        const DetailTrack = () => {
            router.push({path:'/DetailTrack',query: {id:`${route.query.id}`} })
        }

        //路由跳转关联次密接人员信息
        const DetailAssociated = () => {
            router.push({path:'/DetailAssociated',query: {id:`${route.query.id}`}})
        }
        //路由跳转跟踪转运
        const DetailTrajectory = () => {
            router.push({path:'/DetailTrajectory',query: {id:`${route.query.id}`}})
        }
        //路由跳转居家医学观察/监测
        const DetailHomeMedicine = () => {
            router.push({path:'/DetailHomeMedicine',query: {id:`${route.query.id}`}})
        }
        //路由跳转数据日志
        const DetailDataLog = () => {
            router.push({path:'/DetailDataLog',query: {id:`${route.query.id}`}})
        }

        return {
            DetailInformation,
            DetailTrack,
            DetailAssociated,
            DetailTrajectory,
            DetailHomeMedicine,
            DetailDataLog
        }
    }
});
</script>
  
<style scoped>
.crumbs {
    font-size: 15px;
    height: 60px;
    width: 100%;

    display: flex;
    align-items: center;
    padding-left: 10px;
}

.box {
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: #f5f5f5;
    flex-direction: column;
    align-items: center;
}

.banner-box {
    width: 100%;
}

.crumbs-box {
    width: 100%;
}

/* tag标题 */
.tag-box {
    display: flex;
    height: 40px;
    width: 70%;
}

.tag {
    background-color: #fff;
    height: 100%;
    display: flex;
    align-items: center;
    width: 100%;
    text-align: center;
    justify-content: center;
    border-radius: 0 20px 0 0;
    font-size: 15px;
}

.tag:hover {
    cursor: pointer;
}
</style>
  